<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <title>${goods.goodsName}</title>
    <meta name="keywords" content="${goods.goodsName}" />
    <meta name="description" content="${goods.goodsName}" />

    <link rel="stylesheet" href="${base}/static/css/mui.css" />
    <link rel="stylesheet" href="${base}/static/css/font/iconfont.css" />
    <link rel="stylesheet" href="${base}/static/css/product.css" />
    <link rel="stylesheet" href="//cdn.bootcss.com/weui/1.1.1/style/weui.min.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css">
    <style type="text/css">
        .mui-backdrop {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 998;
            background-color: rgba(0,0,0,.3);
        }
        .mui-slider-item {
            height: 180px;
        }
    </style>
</head>

<body class="bgcolor12">
<div class="contbox">
    <div class="mui-content">
        <!--logo部分-->
        <div id="logoDiv" class="mui-row">
            <div class="mui-col-xs-12 logo-box clear-fix">
                <img src="${base}/static/img/logo_04.png"/><span>健维商城</span>
            </div>
        </div>
        <!--logo部分-->

        <!--基本信息 产品详情切换-->
        <div id="switchBtnDiv" class="mui-row mui-bar mui-bar-nav switch-intro-detail" style="background: #fff;border-bottom: 1px solid #eee;height: 65px;top: 52px;">
            <div class="mui-col-xs-12">
                <div id="switchBtns" class="switch-btns-list clear-fix">
                    <div class="over-button-style">基本信息</div>
                    <div>产品详情</div>
                </div>
            </div>
        </div>

        <!--基本信息 产品详情切换-->
        <!--占位置高度-->
        <div style="height: 65px;"></div>
        <!--占位置高度-->
        <!--基本信息内容-->

        <!--轮播图部分-->
        <div class="mui-row">

            <div id="slider" class="mui-slider">
                <div class="mui-slider-group mui-slider-loop">
                    <%
                        for (img in imgs) {
                    %>
                    <%  if(imgLP.first) {%>
                    <div class="mui-slider-item mui-slider-item-duplicate">
                        <a href="#" target="_blank">
                            <img src="${base}${imgs[imgs.~size-1].imgUrl}"/>
                        </a>
                    </div>
                    <%}%>
                    <div class="mui-slider-item">
                        <a href="#" target="_blank">
                            <img src="${base}${img.imgUrl}"/>
                        </a>
                    </div>
                    <%  if(imgLP.last) {%>
                    <div class="mui-slider-item mui-slider-item-duplicate">
                        <a href="#" target="_blank">
                            <img src="${base}${imgs[0].imgUrl}"/>
                        </a>
                    </div>
                    <%}%>
                    <%
                        }
                    %>
                </div>
                <div class="mui-slider-indicator">
                    <%
                        for (img in imgs) {
                    %>
                    <div class="mui-indicator ${imgLP.first?"mui-active"}"></div>
                    <% } %>
                </div>
            </div>
            <!--轮播图部分-->
            <!--某某产品名称/参数部分-->
            <div class="mui-row">
                <div class="mui-col-xs-12 canshubox">
                    <h6>${goods.goodsName}</h6>
                    <div class="canshubox1 clear-fix">
                        <span><b style="font-size: 16px;">¥</b>${goods.price/100}</span>
                        <span>货源充足</span>
                    </div>
                </div>
            </div>
        </div>
        <!--基本信息内容-->
        <!--产品详情内容-->
        <div id="goodsDetailInfo" class="mui-row">
            <div class="mui-col-xs-12 goods-detail-info">
                <div class="goods-detail-info-content">
                    ${goods.detailInfo}
                </div>
            </div>
        </div>
        <!--产品详情内容-->

        <!--占位置高度-->
        <div style="height: 140px;"></div>
        <!--占位置高度-->

        <!--底部nav部分-->
        <div class="navshangpinlist">
            <div class="stopke">
                <img src="${base}/static/img/rr3png_04.png" />
                <div class="navshangpinlist1">当前人数：<span>${goods.sales}</span></div>
                <!--倒计时-->
                <span id="disCutDown"></span>
            </div>
            <!--进度条-->
            <div class="process-box">
                <div class="process-box-panel">
                    <div class="left"></div>
                    <div class="right"></div>
                    <div id="processCnt"></div>
                    <div id="processBar"></div>
                </div>
            </div>
            <!--导航-->
            <div class="project-detail-nav clear-fix">
                <a href="javascript:history.go(-1);" class="go-back-shop">
                    <img src="${base}/static/img/86_03.png" />
                    <span class="mui-icon shop-icon"><i class="icons-font icon-shop"></i></span>
                    <span class="mui-tab-label shop-span">商城首页</span>
                </a>
                <div id="atpGroupBuy" class="buy-button">立即下单</div>
            </div>
        </div>
        <!--底部nav部分-->
    </div>
</div>
<div id="maskDiv" class="mui-backdrop" style="display:none;"></div>
<script type="text/javascript" src="${base}/static/js/jquery.min.js"></script>
<script src="${base}/static/js/mui.js"></script>
<script src="//cdn.bootcss.com/jquery-weui/1.0.1/js/jquery-weui.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" charset="utf-8">

    wx.config({
        debug: false,
        appId: "${jssdk['appId']}",
        timestamp: ${jssdk['timestamp']},
        nonceStr: "${jssdk['nonce']}",
        signature: "${jssdk['sign']}",
        jsApiList: ['checkJsApi','onMenuShareTimeline','getNetworkType']
    });

    wx.ready(function(){

        wx.onMenuShareTimeline({
            title: '${goods.shareDes}',
            link: "${jssdk['url']}",
            imgUrl: 'http://${jssdk['domain']}${imgs[0].imgUrl}',
            trigger: function (res) {

            },
            success: function () {
                var rwdId = '${rwd.rewardId}';
                console.info(rwdId);
                if (rwdId!=''){
                    var btnArray = ['放弃', '抽奖'];
                    mui.confirm('获得一次抽奖机会', '恭喜恭喜', btnArray, function(e) {
                        if(e.index == 1) {
                            var url = '${rwd.rewardImg}'
                            window.location.href = '${base}/front/product/enterLottery.do?gId=${goods.goodsId}&rwdId=${rwd.rewardId}&rwdImg='+url.replace('&','%26');
                        } else {
                            mui.toast('用户放弃领奖');
                        }
                    })
                }
            },
            cancel: function () {
                mui.alert('用户已取消分享');
            },
            fail: function (res) {
                mui.alert('分享商品信息失败');
            }
        });
    });



    var num = ${goods.limitNum - goods.sales};
    var endTime = ${actEt};
    var intervalId;

    $(function () {
        mui.init();

        $.showLoading();
        <% if (imgs.~size>1) {%>
        var gallery = mui('.mui-slider');

        gallery.slider({
            interval: 3000
        });
        <% } %>
        if (num>0 && (endTime > new Date().getMilliseconds())) {
            $('#atpGroupBuy').bind('click', function () {
                var btnArray = ['取消', '确定'];
                mui.confirm('你将购买${goods.goodsName}<br/>' + '产品价格：￥${goods.price/100}元', '确认订单', btnArray, function(e) {
                    if(e.index == 1) {
                        //success
                        $('#maskDiv').show();
                        mui.toast('订单正在生成...',{ duration:1000, type:'div' });

                        $.post('${base}/front/product/buildGoodsOrder.do',{goodsId:${goods.goodsId}}, function (result) {
                            if (result.ok && result.errCode=='0') {
                                var payUrl = '/wechat/prepareOrderPay.do?openId=${user.openId}&orderNo='+result.data+
                                    '&goodsId=${goods.goodsId}';
                                mui.toast('支付跳转中...',{ duration:1000, type:'div' });
                                setTimeout(function () {
                                    window.location.href = payUrl;
                                }, 1500);
                            } else {
                                var msg = '订单生成失败,请稍后再试!'
                                if (result.errCode == '201') {
                                    msg = '抱歉,每个人只能有参与一次的机会,别太贪心哟.'
                                } else if (result.errCode == '202') {
                                    msg = '哈哈,你来晚一步啦,商品已经售罄啦.';
                                }
                                mui.toast(msg,{ duration:2500, type:'div' });
                            }
                            setTimeout(function () {
                                $('#maskDiv').hide();
                            }, 2600)
                        }, 'json');

                    } else {
                        mui.toast('期待再次光临', { duration:2000, type:'div' });
                    }
                });
            });
        } else {
            $('#atpGroupBuy').text('活动已结束');
            $('#atpGroupBuy').css('color','#ff0000');
        }

        graphProcess(${goods.sales / goods.limitNum}, endTime);

        intervalId = setInterval(function () {
            disCountDown(endTime);
        }, 1000);



        $('#switchBtns').children().each(function (r, w) {
            var overBtnStyle = 'over-button-style';
            $(this).bind('click', function () {
                $(this).addClass('over-button-style').siblings('.'+overBtnStyle).removeClass(overBtnStyle);
                if (r==0) {
                    $(window).scrollTop(0);
                } else {
                    var top = $('#goodsDetailInfo').position().top - 60;
                    $(window).scrollTop(top);
                }
            });
        });

        $(window).on('scroll', function() {
            var winScroll = $(this).scrollTop();
            if (winScroll > 5) {
                $('#switchBtnDiv').css('top', 0);
            } else {
                $('#switchBtnDiv').css('top', 52);
            }
        });

        setTimeout(function () {
            $.hideLoading();
        }, 800);
    });

    function disCountDown(timestamp) {

        var now = new Date();
        var end = new Date(timestamp);

        if (end > now && num > 0) {
            var leftSec = parseInt((end.getTime() - now.getTime()) / 1000);
            var day = Math.floor(leftSec / (60 * 60 * 24));
            var hour = Math.floor((leftSec - day * 24 * 60 * 60)/ 3600);
            var min = Math.floor((leftSec - day * 24 * 60 * 60 - hour * 60 * 60) / 60);
            var sec = Math.floor(leftSec - day * 24 * 60 * 60 - hour * 60 * 60 - min * 60);

            var html = day+'天'+(hour<10 ? '0'+hour : hour)
                +'时'+(min<10 ? '0'+min : min)
                +'分'+(sec<10 ? '0'+sec : sec)+'秒';
            $('#dis-cut-down').html(html);
        } else {
            $('#dis-cut-down').html('<span style="color:#ff0000">已结束</span>');
            clearInterval(intervalId);
            $('#atpGroupBuy').text('活动已结束');
            $('#atpGroupBuy').css('color','#ff0000');
            $('#atpGroupBuy').unbind('click');

        }
    }

    function graphProcess(percent, timestamp) {
        var now = new Date().getMilliseconds();
        if (now > timestamp || num == 0) {
            percent = '100';
        }

        $('#process-bar').css('width', percent+'%');
        $('#process-count').css('left', $('#process-bar').width()+10);
        $('#process-count').text(percent+'%');
    }
</script>
</body>

</html>
